<template>
    <div id="wrap">
			<div id="top_content">
				<div id="header">
					<div id="rightheader">
						<p>
							2009/11/20
							<br />
<!--							<apan @click="exit">安全退出</apan>-->
                            <i class="el-icon-close"></i>  <apan @click="exit">安全退出</apan>
						</p>
					</div>
					<div id="topheader">
						<h1 id="title">
							<a href="#">main</a>
						</h1>
					</div>
					<div id="navigation">
					</div>
				</div>
				<div id="content">
					<p id="whereami">
					</p>
					<h1>
						欢迎一直超神的召唤师||{{$route.query.name}}||迈入祖安街区,小心不要送赏金哦
					</h1>
					<table class="table">
						<tr class="table_header">
							<td>ID</td>
							<td>姓名</td>
							<td>头像</td>
							<td>工资</td>
							<td>年龄</td>
							<td>操作</td>
						</tr>
						<tr v-for="(emp,index) in emp_list" :key="emp.id" :class="index%2==0?'row1':'row2'">
							<td>{{emp.id}}</td>
							<td>{{emp.e_name}}</td>
							<td><img :src="emp.photo" style="height: 60px;"></td>

							<td>{{emp.salary}}</td>
							<td>{{emp.age}}</td>
							<td>
<!--                                <a  @click="delemp(emp.id)">删除</a>-->
<!--                                <i class="el-icon-delete"></i>  <a  @click="delemp(emp.id)">删除</a>-->
                                <el-button type="danger" plain><i class="el-icon-delete"></i>  <a  @click="delemp(emp.id)">删除</a></el-button>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--                                <a href="javascript:void(0)" @click="up_emp(emp.id)">更新</a>-->
<!--                                <i class="el-icon-edit"></i>  <a href="javascript:void(0)" @click="up_emp(emp.id)">更新</a>-->
                                <el-button type="success" plain><i class="el-icon-edit"></i>  <a href="javascript:void(0)" @click="up_emp(emp.id)">更新</a></el-button>
                            </td>
<!--                                <router-link :to="{name:'updateemp',params:{id:emp.id,name:emp.e_name,salary:emp.salary,age:emp.age}}">更新</router-link>-->

						</tr>

					</table>
					<p>
<!--						<input type="button" class="button" value=" 添加员工 " />-->
<!--                        <router-link to="/addemp">添加员工</router-link>-->
<!--                        <i class="el-icon-circle-plus"><router-link to="/addemp">  添加员工</router-link></i>-->
                        <el-button type="success" plain><i class="el-icon-circle-plus"><router-link to="/addemp">  添加员工</router-link></i></el-button>
					</p>
				</div>
			</div>
			<div id="footer">
				<div id="footer_bg">
				ABC@126.com
				</div>
			</div>
		</div>
</template>

<script>
    export default {
        name: "Emplist",
        data(){
            return{
                user_msg:"",
                emp_list:[],


            }
        },
        /*定义一个函数,用来解决强制登录问题,使用生命周期函数来写*/
        methods:{
            // 点击安全退出,清除数据,返回登录页面
            exit(){
                sessionStorage.removeItem("user")
                this.$router.push("/login")
            },
            //获取所有员工的信息
            findAllEmp(){
                this.$axios({
                    url:"http://127.0.0.1:8000/api/emplist/",
                    method:"post",
                }).then(res=>{
                    console.log("这是1");
                    console.log(res);
                    console.log(res.data["status"]["result"]);
                    console.log("这是2");
                    this.emp_list=res.data["status"]["result"]
                }).catch(res=>{
                    console.log(error);
                    alert('全部展示出错')
                })
            },
            //删除员工
            delemp(id){
                this.$axios({
                    url:"http://127.0.0.1:8000/api/delete/",
                    method:"post",
                    data:{
                        id:id
                    },
                }).then(res=>{
                    console.log(res);
                    // alert("删除员工成功")
                    this.$router.go(0) //删除成功刷新页面,或者重新跳转至首页

                }).catch((res=>{
                    console.log(error);
                    alert('删除员工出错')
                }))
            },
            //更新员工
            up_emp(id){
                this.$router.push("/updateemp/?id="+id)
            }
        },
        created() {
            // 读取存在session里面的数据,有则直接进入主页面,没有返回登录页面
            let user=sessionStorage.getItem("user")
            if(user){
                // alert("访问成功")
                this.$message({
                  message: '欢迎你,召唤师,迈入祖安街区',
                  type: 'success'
                });
            }else{
                // console.log("提示一个错误信息,你还没有登录,请登录");  /*之后用ui改掉*/
                this.$message({
                  message: '亲爱的召唤师,你还木有登录哦',
                  type: 'warning'
                });
                this.$router.push("/login")
            }
            //页面加载完成前获取员工的列表数据,赋值给data
            this.findAllEmp()
        }

    }

</script>

<style scoped>


</style>
